<template>
  <q-page-sticky
    expand
    position="bottom"
    :class="{'white-bg':isDark}"
  >
    <div v-if="tip && !close" class="full-width flex" :class="isDark ? 'tip-wh' : 'tip-bk'">
      <q-space />
      {{tipType[tip]}}未绑定！
      <q-btn :label="'绑定'+tipType[tip]" color="primary" size="sm" @click="triggerTip" />
      <q-space />
      <q-btn icon="close" class="q-mr-sm" size="sm" dense flat @click="close = !close" />
    </div>

    <div
      class="text-center"
      :class="isDark ? 'text-dark' : 'text-white'"
      @dblclick="$vconsole && $vconsole.showSwitch()"
    >
      <slot>&copy;{{ year }} 浙江木多鱼智能科技有限公司 <q-icon name="phone" />13957062828</slot>
    </div>
  </q-page-sticky>
</template>

<script>
import { defineComponent } from 'vue';
import { date } from 'quasar';

export default defineComponent({
  name: 'copyright',
  props: {
    isDark: {
      type: Boolean,
      default: false
    },
    tip: String
  },
  data () {
    return {
      year: '',
      tipType: {
        wechat: '微信',
        dingtalk: '钉钉'
      },
      close: false
    }
  },
  mounted () {
    const timestamp = Date.now();
    this.year = date.formatDate(timestamp, 'YYYY');
  },
  methods: {
    triggerTip () {
      this.$emit('trigger');
    },
    toggleVconsole () {

    }
  }
});
</script>

<style scoped>
.my-copyright {
    margin-bottom: 10px;
}
.white-bg{
    background-color: rgba(255, 255, 255,0.8)
}
.tip-bk {
  background-color: rgba(75, 75, 75, 0.7);
  color: #ffffff;
  padding: 10px 0;
}
.tip-wh {
  background-color: rgba(255, 255, 255, 0.7);
  color: #1D1D1D;
  padding: 10px 0;
}
</style>
